<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-lg p-6">
    <fieldset class="flex flex-wrap gap-3">
      <legend class="sr-only">Color</legend>

      <label
        for="ColorBlack"
        class="block size-8 rounded-full bg-black shadow-sm has-checked:ring-2 has-checked:ring-black has-checked:ring-offset-2"
      >
        <input
          type="radio"
          name="ColorOption"
          value="ColorBlack"
          id="ColorBlack"
          class="sr-only"
          checked
        />

        <span class="sr-only">Black</span>
      </label>

      <label
        for="ColorRed"
        class="block size-8 rounded-full bg-red-500 shadow-sm has-checked:ring-2 has-checked:ring-red-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorRed" id="ColorRed" class="sr-only" />

        <span class="sr-only">Red</span>
      </label>

      <label
        for="ColorBlue"
        class="block size-8 rounded-full bg-blue-500 shadow-sm has-checked:ring-2 has-checked:ring-blue-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorBlue" id="ColorBlue" class="sr-only" />

        <span class="sr-only">Blue</span>
      </label>

      <label
        for="ColorGold"
        class="block size-8 rounded-full bg-amber-500 shadow-sm has-checked:ring-2 has-checked:ring-amber-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorGold" id="ColorGold" class="sr-only" />

        <span class="sr-only">Gold</span>
      </label>
    </fieldset>
  </body>
</html>
